<template>
	<view class="out">
		<input type="text" v-model="firstName" />
		<input type="text" v-model="lastName" />
		<view>全称：{{firstName + "-" + lastName}}</view>
		<!-- 计算属性实现 -->
		<view>{{fullName}}</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';

const firstName = ref("")
const lastName = ref("")

// 计算属性（有缓存）
// const fullName = computed(() => {
// 	return firstName.value + "-" + lastName.value
// })
const fullName = computed(() => firstName.value + "-" + lastName.value)
</script>

<style scoped lang="scss">
.out{
	padding: 20px;
	input{
		border: 1px solid #ccc;
		height: 40px;
		margin: 10px 0;
		padding: 0 10px;
	}
}
</style>
